<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
<div id="app">
    <div>
        <div class="little">
            <p>About password regulation</p>
            <a href="http://localhost:8080/ManageSystem/login.html"><button>Login</button></a>
        </div>
        <div class="big Login">
            <form>
            <h1>Reset Password</h1>
                <div class="Tips"></div>
                <input type="text" placeholder="电子邮件 "v-model="reset.email">
                <input type="button" :disabled=btnDisabled @click="sendEmail" v-model="btnText"></input><br>
                <div class="passwordTip"></div>
                <input type="password" placeholder="新密码" v-model="reset.password"><br>
                <input type="password" placeholder="确认密码" @blur="checkPassword" v-model="confirmPassword"><br>
                <input type="text" placeholder="验证码"><br>
                <el-button @click="resetPassword">Reset</el-button>
            </form>
        </div>
    </div>
</div>


<script src="js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>

<script>

    new Vue({
        el: "#app",
        methods: {
            sendEmail(){
                let time = 60;
                this.btnDisabled=!this.btnDisabled;
                var _this = this;
                const clean = setInterval(function () {
                    time = time - 1;
                    _this.btnText = time+"秒后可重新获取";
                    if (time === 0) {
                        _this.btnDisabled=!_this.btnDisabled;
                        _this.btnText = "获取验证码";
                        clearInterval(clean);
                    }
                }, 1000);
                axios({
                    method: "post",
                    url: "http://localhost:8080/ManageSystem/user/sendEmail",
                    data: this.reset.email
                }).then(resp=>{
                    this.vCode_t = resp.data;
                })
            },
            checkPassword(){
                const passwordTip = document.querySelector(".passwordTip");
                if (this.reset.password !== this.confirmPassword) {
                    passwordTip.innerText = "两次密码不一致";
                } else
                    passwordTip.innerText = "";
            },

            resetPassword(){
                axios({
                    method: "post",
                    url: "http://localhost:8080/ManageSystem/user/resetPassword",
                    data: this.reset
                }).then(resp=>{
                    alert(resp.data);
                })
            }
        },
        data() {
            return {
                reset:{
                    email:'',
                    password:'',
                },
                confirmPassword:'',
                vCode:'',
                vCode_t:'lonelysnow',
                btnDisabled:false,
                btnText:'发送验证码',
                time:3,
            }
        }
    })

</script>

</body>
</html>